<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <div id="app">
        <child-component v-on:open="test($event)"></child-component>
        <child-component @open="test($event)"></child-component>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        // 子组件通过自定义事件方式向父组件传值
        // 子组件注册事件，父组件监听事件
        Vue.component('ChildComponent', {
            data: function () {
                return {}
            },
            props: ['title'],
            template: `<div>
                                <button @click="handle">点击按钮</button>
                            </div>`,
            methods: {
                handle: function () {
                    this.$emit('open', 123);
                }
            },
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "hello vue",
                arrData: ['a', 'b', 'c'],
                objData: {
                    name: 'jack'
                }
            },
            methods: {
                test: function (val) {
                    console.log("open : val =" + val);

                }
            }
        })
    </script>
</body>

</html>